<template>
<div id="app">
    <div class="spcartlist" v-show="fold" >
      <div class="cartcontent">
      <div class="cartop">
        <div class="spcar">购物车</div>
        <div class="spclear">清空</div>
      </div>
      <div class="cartmiddle">
        <ul class="cartitems">
          <li>
            <div class="foodname">莲子核桃黑米粥</div>
            <div class="itemsright">
              <div class="foodprice"><span>￥</span>10</div>
              <div class="foodcount">
                <span class="layout-remove_circle_outline desc"></span>
                <span class="num">1</span>
                <span class="layout-add_circle add"></span>
              </div>
            </div>
          </li>
          <li>
            <div class="foodname">莲子核桃黑米粥</div>
            <div class="itemsright">
              <div class="foodprice"><span>￥</span>10</div>
              <div class="foodcount">
                <span class="layout-remove_circle_outline desc"></span>
                <span class="num">1</span>
                <span class="layout-add_circle add"></span>
              </div>
            </div>
          </li>
          <li>
            <div class="foodname">莲子核桃黑米粥</div>
            <div class="itemsright">
              <div class="foodprice"><span>￥</span>10</div>
              <div class="foodcount">
                <span class="layout-remove_circle_outline desc"></span>
                <span class="num">1</span>
                <span class="layout-add_circle add"></span>
              </div>
            </div>
          </li>
          <li>
            <div class="foodname">莲子核桃黑米粥</div>
            <div class="itemsright">
              <div class="foodprice"><span>￥</span>10</div>
              <div class="foodcount">
                <span class="layout-remove_circle_outline desc"></span>
                <span class="num">1</span>
                <span class="layout-add_circle add"></span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    <!-- </div> -->
      </div>
    

    
   
    </div>
   <!-- 底部 -->
    <div class="footer">
      <div class="hshop">
        <div class="cart" @click="showList">
          <van-icon class="cartnum" name="chat-o" badge="0" />
          <span class="layout-shopping_cart scart"></span>
        </div>
      </div>
      <div class="hprice">￥0</div>
      <div class="addprice">另需配送￥4元</div>
      <div class="totalprice">￥20起送</div>
    </div>

    <div class="mask" v-show="fold" @click="fold = !fold"></div>
</div>
  
</template>

<script>

export default {
  name: "shopCart",
  data(){
    return {
      fold: false,
    }
  },
  methods:{
    showList(){
        this.fold = !this.fold;
    }
  },
  
};
</script>

<style scoped>

.cartcontent {
  position: fixed;
  z-index: 2;
  width: 100%;
  height: 611rem;
  bottom: 0;
  background-color: #fff;
}
.cartcontent .cartop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 79rem;
  background-color: #f3f5f7;
  padding: 0 36rem;
  border-bottom: 1px solid rgba(7, 17, 27, 0.1);
}
.cartop .spcar {
  font-size: 28rem;
  font-weight: normal;
  color: rgb(7, 17, 27);
  line-height: 80rem;
}
.cartop .spclear {
  font-size: 24rem;
  color: rgb(0, 160, 220);
  line-height: 80rem;
}
.cartitems {
  padding: 0 36rem;
}
.cartitems li {
  display: flex;
  position: relative;
  justify-content: space-between;
  padding: 24rem 0;
  border-bottom: 1px solid rgba(7, 17, 27, 0.1);
}
li .foodname {
  font-size: 28rem;
  color: rgb(7, 17, 27);
  line-height: 48rem;
}
li .itemsright {
  position: absolute;
  display: flex;
  align-items: center;
  bottom: 24rem;
  right: 36rem;
  height: 48rem;
  line-height: 48rem;
}
.itemsright .foodprice {
  font-size: 28rem;
  color: rgb(240, 20, 20);
  font-weight: 700;
  line-height: 48rem;
  margin-right: 16rem;
}
.foodprice span {
  font-size: 20rem;
  font-weight: normal;
}
.foodcount {
  display: flex;
  align-items: center;
}
.foodcount .num {
  font-size: 20rem;
  color: rgb(147, 153, 159);
  text-align: center;
  line-height: 48rem;
  margin: 0 24rem;
}

.foodcount .desc,
.foodcount .add {
  font-size: 48rem;
  color: rgb(0, 160, 220);
  line-height: 48rem;
}

.footer {
  display: flex;
  position: relative;
  align-items: center;
  position: fixed;
  z-index: 3;
  bottom: 0;
  width: 100%;
  height: 96rem;
  background-color: #141d27;
}
.footer .hshop {
  position: absolute;
  bottom: 0;
  left: 36rem;
  width: 116rem;
  height: 116rem;
  background-color: #141d27;
  border-radius: 50%;
}
.footer .hshop .cart {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 16rem;
  left: 16rem;
  width: 88rem;
  height: 88rem;
  border-radius: 50%;
  text-align: center;
  background-color: rgb(255, 255, 255, 0.1);
}

.footer .hshop .cart .active {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 16rem;
  left: 16rem;
  width: 88rem;
  height: 88rem;
  border-radius: 50%;
  text-align: center;
  background-color: rgb(0, 160, 220);
}
.cart .cartnum {
  position: absolute;
  bottom: 60rem;
  left: 60rem;
}
.hshop .cart .scart {
  font-size: 48rem;
  line-height: 48rem;
  height: 48rem;
  color: rgb(255, 255, 255, 0.4);
}

.footer .hprice {
  font-size: 32rem;
  color: rgb(255, 255, 255, 0.4);
  font-weight: 700;
  line-height: 48rem;
  padding-right: 24rem;
  margin-left: 160rem;
  border-right: 1px solid rgb(255, 255, 255, 0.1);
}
.footer .addprice {
  font-size: 32rem;
  color: rgb(255, 255, 255, 0.4);
  line-height: 48rem;
  margin-left: 24rem;
}
.footer .totalprice {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 210rem;
  text-align: center;
  font-size: 24rem;
  color: rgb(255, 255, 255, 0.4);
  font-weight: 700;
  line-height: 96rem;
  background-color: #2b333b;
}
.mask{
  position:fixed;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom:0;
  background-color: rgba(7, 17, 27, 0.6);
  filter:blur(5rem);
}
</style>